<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>内容与属性操作</title>
    <style type="text/css">
        * {
            margin-top: 3px;
        }
        
        #div1 {
            width: 500px;
            height: 300px;
            border: #238FCE solid 5px;
        }
        
        .font {
            color: #0044DD;
            font-size: 10px;
        }
        
        .bg {
            background: #FF6600
        }
        
        .hide {
            display: none;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var inputs = document.querySelectorAll('input');
            var div1 = document.querySelector('#div1');
            // 1.设置div样式
            inputs[0].addEventListener('click', function() {
                div1.style.border = '5px solid red';
            });
            // 2.设置类
            inputs[1].addEventListener('click', function() {
                div1.className = 'font';
            });
            // 3.length属性
            inputs[2].addEventListener('click', function() {
                alert(div1.classList.length);
            });
            // 4.添加类,追加类
            inputs[3].addEventListener('click', function() {
                div1.classList.add('bg');
            });
            // 5.删除类
            inputs[4].addEventListener('click', function() {
                div1.classList.remove('bg');
            });
            // 6.切换
            inputs[5].addEventListener('click', function() {
                div1.classList.toggle('bg');
            });
            // 7.返回第一个属性名
            inputs[6].addEventListener('click', function() {
                alert(div1.classList.item(0));
            });
            // 8.contains包含  查看当前元素有无包含类名，有则返回true,无则返回false
            inputs[7].addEventListener('click', function() {
                console.log(div1.classList.contains('font'));
            });


        });
    </script>
</head>

<body>
    <h3>样式操作</h3>
    <input type="button" value="设置div样式" />
    <input type="button" value="设置类" />
    <br/>
    <h3>classList</h3>
    <input type="button" value="length属性" />
    <input type="button" value="添加类" />
    <input type="button" value="删除类" />
    <input type="button" value="切换类" />
    <input type="button" value="item()" />
    <input type="button" value="contains()" />
    <br/> <br/>
    <!-- 测试的元素 -->

    <div id="div1">
        <h3>你敢用普通话读这首诗吗？</h3>
        左边的为一位老师念的 | 右边为一个学生听写的。<br/> 卧春 | 我蠢<br/> 暗梅幽闻花， | 俺没有文化，<br/> 卧枝伤恨底。 | 我智商很低。<br/> 遥闻卧似水， | 要问我是谁，<br/> 易透达春绿。 | 一头大蠢驴。<br/> 岸似绿， | 俺是驴，<br/> 岸似透绿， | 俺是头驴，<br/> 岸似透春绿。 | 俺是头蠢驴。<br/>
    </div>


</body>

</html>